<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <!-- 
    开发者提供html标签结果   ==>  vue以字符串的方式存储于template
                            ==>  当vue应用开始挂载，将template转换为JS存储对象(虚拟DOM)
                            ==>  vue通过 render 函数将 js存储对象(虚拟DOM) 转换为实际的页面元素并完成vue功能绑定
                            ==>  基于转换对象生成DOM元素， 替换到页面的展示位置中

    开发者页面定义的元素结构只是为vue运行提供参考的模板，而vue会基于模板构建对应的关联元素容器
    -->
    <div id="app">
        <!-- <h4>容器定义的页面模板</h4>
        <p id="pDom" ref="pDom">msg:{{ msg }}</p>
        <input v-model="msg" type="text" />
        <br>
        <input type="button" value="options" @click="printOptions()"> -->
    </div>
    <hr>
    <div id="root"></div>
    <hr>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";

        const app = createApp({
            // template 属性可以让开发者在构建vue实例时，脱离html文件构建模板结构
            // template:`
            //     <h4>容器定义的页面模板</h4>
            //     <p id="pDom" ref="pDom">msg:{{ msg }}</p>
            //     <input v-model="msg" type="text" />
            //     <br>
            //     <input type="button" value="options" @click="printOptions()">
            // `,
            data(){
                return {
                    msg:"测试数据msg"
                }
            },
            methods: {
                printOptions() {
                    console.log("$options",this.$options)
                    // 测试vue的模板记录的方案
                    let rootDom = document.querySelector("#root")
                    rootDom.innerHTML = this.$options.template
                }
            },
        });

        let pDom1 = document.querySelector("#pDom")

        app.mount("#app")

        let pDom2 = document.querySelector("#pDom")

        console.log(pDom1,pDom2)
        console.log(pDom1==pDom2)
    </script>
</body>
</html>